<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="../../../commons/taglibs.jsp"%>
<div id="${param.id}"></div>
<script type="text/javascript">
	Ext.QuickTips.init();
	//yepnope("${ctx}/resources/js/user/user.js");
	Ext.ns("Ext.Hxhk.cgFormHead"); // 自定义一个命名空间
	cgFormHead = Ext.Hxhk.cgFormHead; // 定义命名空间的别名
	cgFormHead = {
		all : ctx + '/cgFormHeadController',
		save : ctx + "/cgFormHeadController/save",
		del : ctx + "/cgFormHeadController/del/",
		pageSize : 20,// 每页显示的记录数
		hasActive : true,
		CGFORMTYPE : eval('(${fields.jformType==null?"{}":fields.jformType})'),//注意括号
		IFELSE : eval('(${fields.ifelse==null?"{}":fields.ifelse})'),
		QUERYMODE : eval('(${fields.queryMode==null?"{}":fields.queryMode})')
	};
	/** 改变页的combo*/
	cgFormHead.pageSizeCombo = new Share.pageSizeCombo({
		value : '20',
		listeners : {
			select : function(comboBox) {
				cgFormHead.pageSize = parseInt(comboBox.getValue());
				cgFormHead.bbar.pageSize = parseInt(comboBox.getValue());
				cgFormHead.store.baseParams.limit = cgFormHead.pageSize;
				cgFormHead.store.baseParams.start = 0;
				cgFormHead.store.load();
			}
		}
	});
	//覆盖已经设置的。具体设置以当前页面的pageSizeCombo为准
	cgFormHead.pageSize = parseInt(cgFormHead.pageSizeCombo.getValue());
	/** 基本信息-数据源 */
	cgFormHead.store = new Ext.data.Store({
		remoteSort : true,
		autoLoad : true,
		baseParams : {
			start : 0,
			limit : cgFormHead.pageSize
		},
		proxy : new Ext.data.HttpProxy({// 获取数据的方式
			method : 'POST',
			url : cgFormHead.all
		}),
		reader : new Ext.data.JsonReader({// 数据读取器
			totalProperty : 'results', // 记录总数
			root : 'rows' // Json中的列表数据根节点
		}, [ 'jformType', 'tableName', 'content', 'jformVersion', 'isTree',
				'isPagination', 'isDbSynch', 'isCheckbox', 'querymode',
				'createDate', 'updateDate' ]),
		listeners : {
			'load' : function(store, records, options) {
				for (var i = 0; i < store.getCount(); i++) {
					store.getAt(i)
							.set(
									'createDate',
									cgFormHead.todate(store.getAt(i).get(
											'createDate')));
					store.getAt(i)
							.set(
									'updateDate',
									cgFormHead.todate(store.getAt(i).get(
											'updateDate')));
					//store.getAt(i).set('birthday',staff.str2Date(store.getAt(i).get('birthday')));	
					//alert(store.getAt(i).get('birthday'));
					//alert(records[i].data.birthday);
				}
			}
		}
	});
	/** 基本信息-选择模式 */
	cgFormHead.selModel = new Ext.grid.CheckboxSelectionModel({
		singleSelect : true,
		listeners : {
			'rowselect' : function(selectionModel, rowIndex, record) {
				cgFormHead.deleteAction.enable();
				cgFormHead.editAction.enable();
				cgFormHead.dbSynchAction.enable();
			},
			'rowdeselect' : function(selectionModel, rowIndex, record) {
				cgFormHead.deleteAction.disable();
				cgFormHead.editAction.disable();
				cgFormHead.dbSynchAction.disable();
			}
		}
	});

	/** 基本信息-数据列 */
	cgFormHead.colModel = new Ext.grid.ColumnModel({
		defaults : {
			sortable : true,
			width : 110
		},
		columns : [ cgFormHead.selModel, {
			hidden : true,
			header : 'ID',
			dataIndex : 'id'
		}, {
			header : '表类型',
			dataIndex : 'jformType',
			width : 50,
			renderer : function(v) {
				return Share.map(v, cgFormHead.CGFORMTYPE, '其他');
			}

		}, {
			header : '表名称',
			dataIndex : 'tableName'
		}, {
			header : '表描述',
			dataIndex : 'content'
		}, {
			header : '版本',
			dataIndex : 'jformVersion',
			width : 70
		}, {
			header : '是否树形',
			dataIndex : 'isTree',
			width : 70,
			renderer : function(v) {
				return Share.map(v, cgFormHead.IFELSE, '其他');
			}
		}, {
			header : '是否分页',
			dataIndex : 'isPagination',
			width : 70,
			renderer : function(v) {
				return Share.map(v, cgFormHead.IFELSE, '其他');
			}
		}, {
			header : '同步数据',
			dataIndex : 'isDbSynch',
			width : 70,
			renderer : function(v) {
				return Share.map(v, cgFormHead.IFELSE, '其他');
			}
		}, {
			header : '显示复选框',
			dataIndex : 'isCheckbox',
			width : 80,
			renderer : function(v) {
				return Share.map(v, cgFormHead.IFELSE, '其他');
			}
		}, {
			header : '查询模式',
			dataIndex : 'querymode'
		}, {
			header : '创建时间',
			dataIndex : 'createDate',
			dateFormat : 'Y-m-d',
			renderer : Ext.util.Format.dateRenderer('Y-m-d')
		}, {
			header : '修改时间',
			dataIndex : 'updateDate',
			dateFormat : 'Y-m-d',
			renderer : Ext.util.Format.dateRenderer('Y-m-d')
		}, {
			header : '操作',
			dataIndex : ''
		} ]
	});
	/** 新建 */
	cgFormHead.addAction = new Ext.Action({
		text : '创建表单',
		//text : '<fmt:message key="common.cancel"/>',
		iconCls : 'user_add',
		handler : function() {
			cgFormHead.addWindow.setIconClass('user_add'); // 设置窗口的样式
			cgFormHead.addWindow.setTitle('新建表单'); // 设置窗口的名称
			cgFormHead.addWindow.show().center(); // 显示窗口
			cgFormHead.formPanel.getForm().reset(); // 清空表单里面的元素的值.
			cgFormHead.hasActive = true;
			cgFormHead.tabPanel.activate(cgFormHead.formPanel);
		}
	});
	/** 编辑 */
	cgFormHead.editAction = new Ext.Action({
		text : '编辑',
		iconCls : 'user_edit',
		disabled : true,
		handler : function() {
			var record = cgFormHead.grid.getSelectionModel().getSelected();
			//日期转化
			//record.data.birthday = cgFormHead.todate(record.data.birthday);
			cgFormHead.addWindow.setIconClass('user_edit'); // 设置窗口的样式
			cgFormHead.addWindow.setTitle('编辑表单'); // 设置窗口的名称
			cgFormHead.addWindow.show().center();
			cgFormHead.formPanel.getForm().reset();
			cgFormHead.formPanel.getForm().loadRecord(record);
			cgFormHead.hasActive = true;
			cgFormHead.tabPanel.activate(cgFormHead.formPanel);
		}
	});
	/** 删除 */
	cgFormHead.deleteAction = new Ext.Action({
		text : '删除',
		iconCls : 'user_delete',
		disabled : true,
		handler : function() {
			cgFormHead.delFun();
		}
	});
	/** 查询 */
	cgFormHead.searchField = new Ext.ux.form.SearchField({
		store : cgFormHead.store,
		paramName : 'tableName',
		emptyText : '请输入表名',
		style : 'margin-left: 5px;'
	});
	//自定义按钮
	cgFormHead.customButtonAction = new Ext.Action({
		text : '自定义按钮',
		iconCls : 'field_edit',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//js增强
	cgFormHead.jsAction = new Ext.Action({
		text : 'js增强',
		iconCls : 'field_edit',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//SQL增强
	cgFormHead.sqlAction = new Ext.Action({
		text : '自定义按钮',
		iconCls : 'field_edit',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//表单组件导出
	cgFormHead.exportAction = new Ext.Action({
		text : '表单组件导出',
		iconCls : 'excle',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//表单组件导入
	cgFormHead.importAction = new Ext.Action({
		text : '自定义按钮',
		iconCls : 'put',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//生成代码
	cgFormHead.codeGenerateAction = new Ext.Action({
		text : '代码生成',
		iconCls : 'add',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//数据库表生成表单
	cgFormHead.dataGenerateAction = new Ext.Action({
		text : '数据库表生成表单',
		iconCls : 'add',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	//同步数据库
	cgFormHead.dbSynchAction = new Ext.Action({
		text : '同步数据库',
		iconCls : 'synchro',
		disabled : true,
		handler : function() {
			//cgFormHead.delFun();
		}
	});
	/** 顶部工具栏 */
	cgFormHead.tbar = [ cgFormHead.addAction, '-', cgFormHead.editAction, '-',
			cgFormHead.deleteAction, '-', cgFormHead.searchField, '-',
			cgFormHead.customButtonAction, '-', cgFormHead.jsAction, '-',
			cgFormHead.sqlAction, '-', cgFormHead.exportAction, '-',
			cgFormHead.importAction, '-', cgFormHead.codeGenerateAction, '-',
			cgFormHead.dataGenerateAction, '-', cgFormHead.dbSynchAction ];
	/** 底部工具条 */
	cgFormHead.bbar = new Ext.PagingToolbar({
		pageSize : cgFormHead.pageSize,
		store : cgFormHead.store,
		displayInfo : true,
		//plugins : new Ext.ux.ProgressBarPager(), // 分页进度条
		items : [ '-', '&nbsp;', cgFormHead.pageSizeCombo ]
	});

	/** 基本信息-表格 */
	cgFormHead.grid = new Ext.grid.GridPanel({
		title : '智能表单配置',
		store : cgFormHead.store,
		colModel : cgFormHead.colModel,
		selModel : cgFormHead.selModel,
		tbar : cgFormHead.tbar,
		bbar : cgFormHead.bbar,
		autoScroll : 'auto',
		region : 'center',
		// autoExpandColumn :'describle',
		loadMask : true,
		viewConfig : {},
		stripeRows : true
	});

	cgFormHead.cgformTypeCombo = new Ext.form.ComboBox({
		fieldLabel : '表类型',
		hiddenName : 'jformType',
		name : 'jformType',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : [ 'v', 't' ],
			data : Share.map2Ary(cgFormHead.CGFORMTYPE)
		}),
		valueField : 'v',
		displayField : 't',
		allowBlank : true,
		editable : false,
		width : 200
	});
	cgFormHead.isTreeCombo = new Ext.form.ComboBox({
		fieldLabel : '是否树形',
		hiddenName : 'isTree',
		name : 'isTree',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : [ 'v', 't' ],
			data : Share.map2Ary(cgFormHead.IFELSE)
		}),
		valueField : 'v',
		displayField : 't',
		allowBlank : true,
		editable : false,
		width : 200
	});
	cgFormHead.isPaginationCombo = new Ext.form.ComboBox({
		fieldLabel : '是否分页',
		hiddenName : 'isPagination',
		name : 'isPagination',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : [ 'v', 't' ],
			data : Share.map2Ary(cgFormHead.IFELSE)
		}),
		valueField : 'v',
		displayField : 't',
		allowBlank : true,
		editable : false,
		width : 200
	});
	cgFormHead.isCheckboxCombo = new Ext.form.ComboBox({
		fieldLabel : '是否显示复选框',
		hiddenName : 'isCheckbox',
		name : 'isCheckbox',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : [ 'v', 't' ],
			data : Share.map2Ary(cgFormHead.IFELSE)
		}),
		valueField : 'v',
		displayField : 't',
		allowBlank : true,
		editable : false,
		width : 200
	});
	cgFormHead.queryModeCombo = new Ext.form.ComboBox({
		fieldLabel : '查询模式',
		hiddenName : 'querymode',
		name : 'querymode',
		triggerAction : 'all',
		mode : 'local',
		store : new Ext.data.ArrayStore({
			fields : [ 'v', 't' ],
			data : Share.map2Ary(cgFormHead.QUERYMODE)
		}),
		valueField : 'v',
		displayField : 't',
		allowBlank : true,
		editable : false,
		width : 200
	});
	/** 基本信息-详细信息的form */
	cgFormHead.formPanel = new Ext.form.FormPanel({
		title : "智能表单信息",
		width : 650,
		autoHeight : true,
		frame : true,
		//renderTo : Ext.getBody(),
		layout : "form", // 整个大的表单是form布局 
		labelWidth : 80,
		labelAlign : "right",
		items : [ {
			// 行1   
			layout : "column", // 从左往右的布局   
			items : [ {
				columnWidth : .5, // 该列有整行中所占百分比   
				layout : "form", // 从上往下的布局  
				items : [ {
					xtype : "textfield",
					fieldLabel : "表名",
					name : 'tableName',
					width : 200
				} ]
			}, {
				columnWidth : .5,
				layout : "form",
				items : [ {
					xtype : "textfield",
					fieldLabel : "主键策略",
					name : 'jformPkType',
					width : 200
				} ]
			} ]
		}, {
			// 行2 
			layout : "column",
			items : [ {
				columnWidth : .5,
				layout : "form",
				items : [ {
					xtype : "textfield",
					fieldLabel : "表描述",
					name : 'content',
					width : 200
				} ]
			}, {
				columnWidth : .5,
				layout : "form",
				items : [ cgFormHead.cgformTypeCombo ]
			} ]
		}, {
			// 行3 
			layout : "column",
			items : [ {
				columnWidth : .5,
				layout : "form",
				items : [ cgFormHead.isTreeCombo ]
			}, {
				columnWidth : .5,
				layout : "form",
				items : [ cgFormHead.isPaginationCombo ]
			} ]
		}, {
			// 行4
			layout : "column",
			items : [ {
				columnWidth : .5,
				layout : "form",
				items : [ cgFormHead.isCheckboxCombo ]
			}, {
				columnWidth : .5,
				layout : "form",
				items : [ cgFormHead.queryModeCombo ]
			} ]
		} ,{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:280,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'数据库属性',
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jamie'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Avins'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'页面属性',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                cls: 'x-plain',
                title: '校验字典',
                layout: 'fit',
                items: {
                    xtype: 'htmleditor',
                    name: 'bio2',
                    fieldLabel: 'Biography'
                }
            },{
                cls: 'x-plain',
                title: '外键',
                layout: 'fit',
                items: {
                    xtype: 'htmleditor',
                    name: 'bio2',
                    fieldLabel: 'Biography'
                }
            }]
        }]
	});

	cgFormHead.tabPanel = new Ext.TabPanel({
		activeTab : 0,
		defaults : {
			autoHeight : true
		},
		items : [  {
			closable : false,
			title : "面板2",
			html : "<h1>this is the second panel!</h1>"
		}, {
			closable : false,
			title : "面板3",
			html : "<h1>this is the third panel!</h1>"
		} ]
	});

	/** 编辑新建窗口 */
	cgFormHead.addWindow = new Ext.Window({
		layout : 'fit',
		width : 800,
		height : 500,
		closeAction : 'hide',
		plain : true,
		modal : true,
		resizable : true,
		items : [ cgFormHead.formPanel],
		buttons : [ {
			text : '保存',
			handler : function() {
				cgFormHead.saveFun();
			}
		}, {
			text : '重置',
			handler : function() {
				var form = cgFormHead.formPanel.getForm();
			}
		} ]
	});

	cgFormHead.saveFun = function() {
		var form = cgFormHead.formPanel.getForm();
		if (!form.isValid()) {
			cgFormHead.tabPanel.activate(cgFormHead.formPanel);
			return;
		}
		var params = {};
		$.extend(params, form.getValues());
		//params.birthday=cgFormHead.str2Date(params.birthday);
		//alert(params.birthday);
		//alert(params.birthday);
		// 发送请求
		Share.AjaxRequest({
			url : cgFormHead.save,
			params : params,
			callback : function(json) {
				cgFormHead.addWindow.hide();
				//user.alwaysFun();
				cgFormHead.store.reload();
				//fix bug 打开页面，编辑，不点击角色的tab。直接点击保存，再点击新建，在保存，会直接提交。
				//	user.tabPanel.activate(user.roleGrid);
				//Share.resetGrid(user.roleGrid);
			}
		});
	};

	cgFormHead.delFun = function() {
		var record = cgFormHead.grid.getSelectionModel().getSelected();
		Ext.Msg.confirm('提示', '确定要删除这条记录吗?', function(btn, text) {
			if (btn == 'yes') {
				// 发送请求
				Share.AjaxRequest({
					url : cgFormHead.del + record.data.id,
					callback : function(json) {
						//user.alwaysFun();
						cgFormHead.store.reload();
					}
				});
			}
		});
	};

	cgFormHead.todate = function(v) {
		if (v == null) {
			return null;
		}
		var d = new Date();
		var str = v.toString();
		var dd = parseInt(str);
		d.setTime(dd);
		return d;
	};

	cgFormHead.str2Date = function(v) {
		if (v == null) {
			return null;
		}
		var d = Date.parse(v);//new Date(Date.parse(v.replace(/-/g,   "/")));
		alert(d);
		return d;
	}

	cgFormHead.myPanel = new Ext.Panel({
		id : '${param.id}' + '_panel',
		renderTo : '${param.id}',
		layout : 'border',
		boder : false,
		height : index.tabPanel.getInnerHeight() - 1,
		items : [ cgFormHead.grid ]
	});
</script>